<template>
  <div class="all">
<div class="top">
<div class="top-pic"><img src="../assets/Vector 6.png" alt=""></div>
<div class="colle">我的收藏</div>
<div class="heng"></div>
</div>
<div class="pic">
  <div class="one">
        <div class="phone-show">
        <div class="xiaomi"></div>
        <div class="more">
        <div class="card" v-for="item in tabaleData" :key="item.collectId" @click="out(item.productId)">
        <div class="card-pic" :style="{ 'background-image': 'url(http://www.codeedu.com.cn/' + item.productPicture }">
          <div class="mingzi">
          {{item.productName}}
          </div>
          <div class="jieshao">
        {{item.productTitle}}
          </div>
          <div class="price">{{item.productSellingPrice}}</div>
          <div class="noprice">{{item.productPrice}}</div>
          <div class="no"></div>
        </div>
        </div>
        </div>
        </div>
        </div>
    
</div>
</div>
</template>

<script>
import  {getcollect,collect} from '../api/api'
export default {
    name:'Collection',
    data() {
      return {
        tabaleData:{
          	collectId: 0,
            productId: 0,
            productName: "",
            productPicture: "",
            productPrice: 0,
            productSellingPrice: 0,
            productTitle: "",
		
        }
      }
    },
    created(){
      this.getcollect()
      
    },
    methods: {
      ////查询当前用户收藏商品信息
      getcollect(){
        getcollect().then(res=>{
          console.log(res);
          this.tabaleData = res.data.data
        })
      },
     //收藏-取消收藏
      collect(id){
        collect(id).then(res=>{
            console.log(res);
          })
      },
      out(id){
        this.collect(id)
        this.getcollect()
      }



    },
}
</script>

<style scoped>
.all{
    width: 100%;
    position: relative;
    min-height: calc(100vh - 123px - 336px);
}
.top{
    position: absolute;
    width: 1920px;
    height: 80px;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
}
.top-pic{
    position: absolute;
    width: 20px;
    height: 26px;
    top: 27px;
    left: 350px;

}
.colle{
    position: absolute;
    width: 112px;
    height: 28px;
    left: 380px;
    top: 26px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 100%;
    color: #333333;
}
.heng{
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0px;
    top: 80px;
    background: #FF6700;
}
.pic{
  position: absolute;
  width: 1920px;
  height: 344px;
  left: 0px;
  top: 80px;
  background: #F5F5F5;
}

.one{
    position: absolute;
    top: 62px;
  }

  /*.more{
   
    width: 968px;
    height: 614px;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 300px 300px;
    grid-gap: 11px 3px;
  }*/
  .phone-show{
    display: flex;
  }
.card{
  position: absolute;
  left: 360px;
  top: -30px;
  width: 232px;
  height: 300px;
  background-color: #FFFFFF;
  position: relative;
}
.card-pic{
  width: 160px;
  height: 160px;
  background-size: cover;
  position: absolute;
  left: 36px;
  top: 14px;
}
.mingzi{
  height: 14px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.2px;
  color: #333333;
  position: absolute;
  top: 198px;
  left: 42px;
}
.jieshao{
  position: absolute;
  font-style: normal;
  height: 12px;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #B0B0B0;
  left: 10px;
  top: 226px;
}
.price{
  position: absolute;
  top: 250px;
  left: 30px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  letter-spacing: 0.1px;
  color: #FF6700;
}
.noprice{
  width: 68px;
  height: 16px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #B0B0B0;
  position: absolute;
  top: 250px;
  left: 80px;
}
.no{
  width: 54px;
  height: 1px;
  background: #B0B0B0;
  position: absolute;
  top: 258px;
  left: 87px;
}



</style>